<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 变换</title>
    <style>
      body{
        background: #666;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      canvas{
        background: #fff;
      }
      a{
        color: #fff;
        font-size: 24px;
      }
    </style>
</head>
<body>
    <!-- 
      
    -->
    <ul>
      <li><a href="#变换">变换</a></li>
    </ul>
    <div>
      <a id="变换"></a>
      <h1>变换</h1>
      <canvas id="canvas1" width="500" height="500"></canvas>
      <script>

        const drawLine = () => {
          ctx.save();
          ctx.beginPath();
          ctx.moveTo(250, 0);
          ctx.lineTo(250, 500);
          ctx.moveTo(0, 250);
          ctx.lineTo(500, 250);
          ctx.strokeStyle = '#999';
          ctx.stroke();
          ctx.closePath();
          ctx.restore();
        }

        const drawRect = () => {
          
        }

        let oCanvas = document.getElementById('canvas1')
        let ctx = oCanvas.getContext('2d'); //拿到画笔

        // drawLine()


        // const draw = () => {
        //   ctx.clearRect(0,0,500,500)
          
        //   // 变换
        //   ctx.rotate(0.2 * Math.PI / 180)
        //   // 弧度 = 角度 * Math.PI / 180
        //   // 角度 = 180 * 弧度 / Math.PI

        //   ctx.fillStyle = 'red'
        //   ctx.fillRect(10, 10, 50, 50)
        //   ctx.fillStyle = 'green'
        //   ctx.fillRect(440, 10, 50, 50)

        //   ctx.beginPath()
        //   ctx.moveTo(10,10)
        //   ctx.lineTo(490, 10)
        //   ctx.stroke()
        //   ctx.closePath()

        //   requestAnimationFrame(draw)
        // }


        // ctx.translate(250, 250)

        // const draw = () => {
        //   ctx.clearRect(-250, -250,500,500)
          
        //   // 变换
        //   // ctx.rotate(0.2 * Math.PI / 180)
        //   // 弧度 = 角度 * Math.PI / 180
        //   // 角度 = 180 * 弧度 / Math.PI

        //   // ctx.scale(.98, .98)
        //   ctx.transform(
        //     1, 0,
        //     0, 1,
        //     0, 0
        //   );
        //   // ctx.transform(
        //   //       m1_1, m1_2, 水平缩放: 默认 1 	水平倾斜: 默认 0
        //   //       m2_1, m2_2, 垂直倾斜: 默认 0 	垂直缩放: 默认 1
        //   //       dx, dy      水平移动: 默认 0  垂直移动: 默认 0
        //   //   )


        //   ctx.fillStyle = 'red'
        //   ctx.fillRect(10 - 250, 10, 50, 50)
        //   ctx.fillStyle = 'green'
        //   ctx.fillRect(440 - 250, 10, 50, 50)

        //   ctx.beginPath()
        //   ctx.moveTo(10 - 250,10)
        //   ctx.lineTo(490 - 250, 10)
        //   ctx.stroke()
        //   ctx.closePath()

        //   // requestAnimationFrame(draw)
        // }


        let angle = 0

        let img = new Image()
        img.src = './logo.png'

        const draw = () => {
          angle++
          ctx.clearRect(0,0,500,500)
          drawLine() // 绘制基准线

// ----------------------------------------------
          ctx.save()
          ctx.translate(250, 250)

          // 变换
          ctx.rotate(angle * Math.PI / 180)
          // 弧度 = 角度 * Math.PI / 180
          // 角度 = 180 * 弧度 / Math.PI

          // 绘制图形 img
          ctx.drawImage(
            img,
            0, 0,
            img.width, img.height,
            -img.width / 2, -img.height / 2,
            img.width, img.height,
          )
          
          ctx.restore()
// ----------------------------------------------

          requestAnimationFrame(draw)
          
        }

        draw()



      </script>
    </div>
</body>
</html>
